<template>
    <div class="main-box">
        <search-form @search="getDataListByMonth" :showReset="false"></search-form>
        <avue-crud ref="crud" :data="dataList" :option="tableOption" :page="page" :table-loading="dataListLoading"
                   @search-change="searchChange" @on-load="getDataList" @selection-change="selectionChange"
                   @refresh-change="refreshChange">
            <template slot="wnvStatus" slot-scope="scope">
                <el-tag v-if="scope.row.wnvStatus === 'O'" size="small" type="success">初始状态</el-tag>
                <el-tag v-else-if="scope.row.wnvStatus === 'C'" size="small" type="success">计算完成</el-tag>
                <el-tag v-else type="danger" size="small">已审核</el-tag>
            </template>
            <template slot="menu" slot-scope="scope">
                <el-button icon="el-icon-reading" size="small" type="primary"
                           @click="gotoPdf(scope.row)">PDF预览
                </el-button>
<!--                <el-button icon="el-icon-edit" size="small" type="primary"-->
<!--                           @click="gotoDetail(scope.row)">详情-->
<!--                </el-button>-->
            </template>

        </avue-crud>
    </div>
</template>

<script>
// relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);这样，你就不需要下面这一行代码来引入了。
import SearchForm from '@/components/search-form'
import {
    tableOption
} from '@/crud/report/list'
import { MessageBox } from 'element-ui';
export default {
    name: 'Demo',
    components: {SearchForm},
    data() {
        return {
            dataList: [],
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 100 // 每页显示多少条
            },
            chooseMonth: "",
            indexArea: "",
            dataListLoading: false,
            dataListSelections: [],
            tableOption: tableOption,
        }
    },
    mounted() {

    },
    methods: {
        searchChange (params, done) {
            this.getDataList()
        },
        refreshChange () {
            this.getDataList()
        },
        // 多选变化
        selectionChange (val) {
            this.dataListSelections = val
        },
        getDataListByMonth(date){
            console.log("🚀 ~ date", date)
            this.chooseMonth = date.evalYear;
            this.indexArea = date.indexArea;
            this.getDataList();
        },
        gotoDetail(row){
            if(row.wnvStatus === "O"){
                return this.$message.warning("该月份还未评估，不可查看报告！")
            }
            sessionStorage.wnvMonth = row.wnvMonth;
            this.$router.push({
                path: 'report-index',
                query: { }
            })
        },
        gotoPdf(row){
            if(row.wnvStatus === "O"){
                return this.$message.warning("该月份还未评估，不可预览PDF！")
            }
            sessionStorage.wnvPdfMonth = row.wnvMonth;
            this.$router.push({
                path: 'report-pdf',
                query: {
                    wnvArea: row.wnvArea,
                    wnvMonth: row.wnvMonth,
                }
            })
        },
        delMoreHandle () {
            console.log('🚀 ~ this.dataListSelections', this.dataListSelections)
            this.delFunction(this.dataListSelections)
        },
        delFunction (checkedArr) {
            let promiseArr = []
            checkedArr.forEach((item) => {
                promiseArr.push(this.deleteReport(item.wnvMainId,item.wnvMonth))
            })
            Promise.all(promiseArr).then(allRes => {
                console.log("🚀 ~ allRes", allRes)
                let str = allRes.join("<br/>")

                this.$alert(str,"友情提醒",{
                    dangerouslyUseHTMLString:true,
                    callback: () => {
                        this.getDataList()
                    }
                })
            })
        },
        deleteReport(wnvMainId,wnvMonth){
            return new Promise((resolve) => {
                this.$http({
                    url: this.$http.adornUrl(`/admin/wnv/delWnvMain`),
                    method: 'post',
                    data: this.$http.adornData({
                        wnvMainId: wnvMainId
                    })
                }).then(({ data }) => {
                    console.log('🚀 ~ 删除', data)
                    resolve(wnvMonth+" -- "+data);
                })
            })

        },
        getDataList(page, params, done){

            this.$http({
                url: this.$http.adornUrl(`/admin/wnv/queryWnvReportList`),
                method: 'post',
                data: this.$http.adornData({
                    wnvMonth: this.chooseMonth || "",
                    wnvArea: this.indexArea || "",
                    wnvStatus: "A"
                })
            }).then(({ data }) => {
                console.log('🚀 ~ 查询是否有', data)
                this.dataList = data;
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .main-box{
        height: 100%;
        width: 100%;
    }
</style>
